<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .div1{
            width: 100px;
            background-color: aqua;
            height: 100px;
            }
        .div2,.div3{
            width: 100px;
            background-color: rgb(182, 25, 151);
            height: 100px;
            }
    </style>
</head>
<body>
    <div class="box">
        <h1>{{msg}}</h1>
        <div class="div1" v-on:click="sameTest1();sameTest2()">绑定多个相同事件</div>
        <!-- 一个元素绑定多个不同事件时,能否传参?
       通过对象的方式绑定的话,不能传参.
       只能通过绑定单个事件触发
        <div class="div2" v-on="{click:sameTest1('666'),mousemove:sameTest2}">绑定多个不同事件</div> -->
        <div class="div3" @click="sameTest1('这大叔')" @mousemove="sameTest2"></div>
    </div>
    <script>
        /*
        一个元素上通过 v-on:事件名 = "事件对应的回调函数"
        
        遇见情况:
        一个元素上可以绑定多个相同事件  例:v-click = "test() test1()"; 
        多个相同事件,在v-on/@后面的引号中多个函数名用逗号或者分号分割，函数加小括号

       一个元素上绑定多个不同事件 例: v-on {click:test ,mousemoce:test2}
       多个不同事件 v-on/@a使用对象，对象的属性名事件名，属性值是methods中的函数名
       click是点击事件的回调函数   mousemove是鼠标移动事件的回调函数
       
       
       
       
       */

        let vm = new Vue({
            el:'.box',
            data:{
                msg:'王洋洋'
            },
            methods:{
                sameTest1(a){
                    console.log('111');
                    console.log(a);
                },
                sameTest2(){
                    console.log('222');
                }
            },
        })
    </script>
</body>
</html>